<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>isearch@itt</title>
    <!-- Bootstrap 核心 CSS文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>-->

    <style>
        .rs-table {
            /*table-layout设置为fixed也是实现table不超越父元素界限关键之一*/
            table-layout: fixed;
            margin-right: 0px;
            margin-left: 0px;
            margin-top: 2.7px;
            margin-bottom: 2.7px;
            background-color: #204B56;
        }

        #thin-padding {
            background-color: #1C1F28;
            padding-left: 4px;
            padding-right: 4px;
        }

        .blob-num {
            width: 3%;
            min-width: 50px;
            padding-right: 10px;
            padding-left: 10px;
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
            font-size: 12px;
            line-height: 20px;
            color: rgb(221, 215, 163);
            /*color: rgba(27, 31, 35, 0.3);*/
            text-align: right;
            white-space: nowrap;
            vertical-align: top;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .blob-code {
            position: relative;
            padding-right: 10px;
            padding-left: 10px;
            line-height: 20px;
            vertical-align: top;
        }

        .code-inner {
            /*想要隐藏过长的行，可以给table设置width=800类似的定宽*/
            /*这两者组合是关键之一*/
            text-overflow: ellipsis;
            overflow: hidden;
            word-wrap: normal;
            white-space: pre;
            width: 100%;
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
            font-size: 14px;
            color: rgb(181, 194, 217);
        }

        .code-scroll {
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="container">

    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">

                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">Link</a>
                        </li>
                        <li>
                            <a href="#">Link</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong
                                    class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Action</a>
                                </li>
                                <li>
                                    <a href="#">Another action</a>
                                </li>
                                <li>
                                    <a href="#">Something else here</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="#">Separated link</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="#">One more separated link</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input class="form-control" type="text">
                        </div>
                        <button type="submit" class="btn btn-default">
                            Submit
                        </button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">Link</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong
                                    class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Action</a>
                                </li>
                                <li>
                                    <a href="#">Another action</a>
                                </li>
                                <li>
                                    <a href="#">Something else here</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="#">Separated link</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>


        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <form id="formI" name="myform" method="get" action="/">
                <input type="text" name="contact">
                <select name="id">
                    <option>192</option>
                    <option>163</option>
                </select>
                <!--<input name="text">-->
                <button type="submit">submit</button>
            </form>
            <form id="formII" name="mytest" method="get" action="/">
                <div class="form-group">
                    <select name="id">
                        <option>192</option>
                        <option>163</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input  name="email" type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input name="password" type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="exampleInputFile">Input File</label>
                    <input type="file" id="exampleInputFile">
                    <p class="help-block">Example block-level help text here.</p>
                </div>
                <div class="checkbox">
                    <label>
                        <input name="checkout" type="checkbox"> Check me out
                    </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
        <div class="col-md-8">
            @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <h4>isearch</h4>
        </div>
        <div class="col-md-9 hidden-xs">
            <p>The most popular front-end framework for developing responsive, mobile first projects on the web.</p>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
    //    通过javascript脚本实现获取table的父元素的宽度。
    $(window).resize(function () {
        var twidth = $('#thin-padding').width();
        $('#thin-padding table').width(twidth);
    });
</script>
<script type="text/javascript">
    $(document).on('ready', function () {

        var twidth = $('#thin-padding').width();
        $('#thin-padding table').width(twidth);

//        $('.col-md-4 form').on('submit', function (event) {
//            console.log(event.type);
//            alert('(Bubble stage)The event type of this Form:  ' + event.type);
//            alert('succeed!');
////            event.preventDefault();
//        });

    });
</script>
<script></script>
</body>
</html>
